<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 结算账户 新增/编辑 -->
  <!-- :style="{height:windowHeight+'px'}" -->
  <view class="Mall4j page-store-settings-account">
    <view class="uni-forms-box">
      <uni-forms
        ref="accountFormRef"
        :model-value="accounts"
        :rules="rules"
        validate-trigger="submit"
      >
        <!-- 银行名称 -->
        <view class="setting-info-item">
          <uni-forms-item name="bankName">
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                银行名称
              </text>
            </view>
            <view class="input-box">
              <uni-easyinput
                v-model="accounts.bankName"
                placeholder="请输入银行名称"
                maxlength="20"
                @blur="checkInput('bankName')"
              />
            </view>
          </uni-forms-item>
        </view>

        <!-- 开户行 -->
        <view class="setting-info-item">
          <uni-forms-item name="openingBank">
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                银行开户行
              </text>
            </view>
            <view class="input-box">
              <uni-easyinput
                v-model="accounts.openingBank"
                placeholder="请输入银行开户行"
                maxlength="20"
                @blur="checkInput('openingBank')"
              />
            </view>
          </uni-forms-item>
        </view>

        <!-- 账户名 -->
        <view class="setting-info-item">
          <uni-forms-item name="recipientName">
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                账户名
              </text>
            </view>
            <view
              name="recipientName"
              class="input-box"
            >
              <uni-easyinput
                v-model="accounts.recipientName"
                placeholder="请输入账户名"
                maxlength="20"
                @blur="checkInput('recipientName')"
              />
            </view>
          </uni-forms-item>
        </view>

        <!-- 账户 -->
        <view class="setting-info-item">
          <uni-forms-item name="cardNo">
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                账户
              </text>
            </view>
            <view class="input-box">
              <uni-easyinput
                v-model="accounts.cardNo"
                placeholder=" 请输入银行卡号"
                maxlength="30"
                @blur="checkInput('cardNo')"
              />
            </view>
          </uni-forms-item>
        </view>

        <!-- 账户类型 -->
        <view class="setting-info-item">
          <uni-forms-item>
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                账户类型
              </text>
            </view>
            <view class="radio-con">
              <radio-group @change="changeAccountType">
                <!-- margin-right:50rpx; -->
                <radio
                  style="transform:scale(0.8);"
                  value="1"
                  color="#082BA6"
                  :checked="accounts.isDefault === 1"
                >
                  <text class="radio-txt">
                    默认账户
                  </text>
                </radio>
                <radio
                  style="transform:scale(0.8)"
                  value="0"
                  color="#082BA6"
                  :checked="accounts.isDefault === 0"
                >
                  <text class="radio-txt">
                    普通账户
                  </text>
                </radio>
              </radio-group>
            </view>
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>
    <!-- 添加账户 -->
    <view
      v-if="reqType"
      class="account-footer"
    >
      <button
        type="default"
        class="button"
        hover-class="none"
        @tap="submit()"
      >
        确定
      </button>
    </view>
    <!-- 编辑账户 -->
    <view
      v-if="!reqType"
      class="account-footer account-edit"
    >
      <button
        v-if="$isAuthorities('shop:shopBankCard:update')"
        class="button"
        type="default"
        hover-class="none"
        @tap="putShopBankCard()"
      >
        保存账户
      </button>
      <button
        v-if="$isAuthorities('shop:shopBankCard:delete')"
        class="button"
        type="warn"
        hover-class="none"
        @tap="delShopBankCard()"
      >
        删除账户
      </button>
    </view>
  </view>
</template>

<!-- eslint-disable n/no-callback-literal -->
<script setup>
import { reactive } from 'vue'

const $isAuthorities = util.isAuthorities
const Data = reactive({
  // 编辑用户信息
  accounts: {
    bankName: '',
    openingBank: '',
    recipientName: '',
    cardNo: '',
    isDefault: 0
  },
  // 默认账户
  isDefault: 0,
  rules: {
    bankName: {
      rules: [
        { required: true, errorMessage: '请输入银行名称' },
        {
          validateFunction: (rule, value, data, callback) => {
            if (value.length < 2 || value.length > 20) {
              callback('银行名称长度在2-20个字符')
              return false
            }
            return true
          }
        }
      ]
    },
    openingBank: {
      rules: [
        { required: true, errorMessage: '请输入银行开户行' },
        {
          validateFunction: (rule, value, data, callback) => {
            if (value.length < 2 || value.length > 20) {
              callback('银行开户行长度在2-20个字符')
              return false
            }
            return true
          }
        }
      ]
    },
    recipientName: {
      rules: [
        { required: true, errorMessage: '请输入账户名' },
        {
          validateFunction: (rule, value, data, callback) => {
            if (value.length < 2 || value.length > 20) {
              callback('账户名长度在2-20个字符')
              return false
            }
            return true
          }
        }
      ]
    },
    cardNo: {
      rules: [
        { required: true, errorMessage: '请输入账户' },
        {
          validateFunction: (rule, value, data, callback) => {
            const reg = /^([0-9]{1})(\d{7,29})$/
            if (!reg.test(value)) {
              callback('请输入正确的银行卡号')
              return false
            }
            return true
          }
        }
      ]
    }
  },
  reqType: true, //  新增用户/编辑用户
  windowHeight: 720 // 显示高度
})

const { accounts, rules, reqType } = toRefs(Data)

onLoad((options) => {
  getSysInfo()
  if (!options.id) {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: '新增账户'
    })
  } else {
    Data.reqType = false
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: '编辑账户'
    })
    getShopBankCard(options.id)
  }
})

onShow(() => {
  getCurrentPages()
})

const getSysInfo = () => {
  uni.getSystemInfo({
    success: (res) => {
      Data.windowHeight = res.windowHeight
    }
  })
}

/**
  * 切换单选
  */
const changeAccountType = (val) => {
  Data.isDefault = Number(val.detail.value)
}

/**
 * 检查输入框空格
 */
const checkInput = (type) => {
  const reg = /^\s+$/g
  if (type === 'bankName' && reg.test(Data.accounts.bankName)) {
    Data.accounts.bankName = ''
  }
  if (type === 'openingBank' && reg.test(Data.accounts.openingBank)) {
    Data.accounts.openingBank = ''
  }
  if (type === 'recipientName' && reg.test(Data.accounts.recipientName)) {
    Data.accounts.recipientName = ''
  }
  if (type === 'cardNo' && reg.test(Data.accounts.cardNo)) {
    Data.accounts.cardNo = ''
  }
}

/**
 *  添加引号卡信息
 */
const addShopBankCard = () => {
  http.request({
    url: '/shop/shopBankCard',
    data: Data.accounts,
    method: 'POST'
  }).then(({ data }) => {
    setIsDefault(data)
  })
}

const accountFormRef = ref()
/**
 * 提交表单
 */
const submit = () => {
  accountFormRef.value.validate().then(() => {
    addShopBankCard()
  })
}

/**
 * @param {shopBankCardId} Number
 * 通过shopBankCardId获取银行卡信息
 */
const getShopBankCard = (shopBankCardId) => {
  http.request({
    url: '/shop/shopBankCard',
    data: {
      shopBankCardId
    },
    method: 'GET'
  }).then(({ data }) => {
    Data.accounts = data
  })
}

/**
 * 编辑用户
 */
const putShopBankCard = () => {
  accountFormRef.value.validate().then(() => {
    http.request({
      url: '/shop/shopBankCard',
      data: Data.accounts,
      method: 'PUT'
    }).then(() => {
      setIsDefault(Data.accounts.shopBankCardId)
    })
  })
}

/**
 * 删除用户
 */
const delShopBankCard = () => {
  uni.showModal({
    title: '提示',
    content: '请确定是否删除该账户？',
    success: function (res) {
      if (res.confirm) {
        http.request({
          url: '/shop/shopBankCard/' + Data.accounts.shopBankCardId,
          method: 'DELETE'
        }).then(() => {
          uni.redirectTo({
            url: '/package-settings/pages/store-settings-financial/store-settings-financial'
          })
        })
      }
    }
  })
}

/**
 * @param {Number} shopBankCardId  银行卡id
 */
const setIsDefault = (shopBankCardId) => {
  // 是否修改账户默认类型
  if (Data.accounts.isDefault === Data.isDefault) {
    return uni.redirectTo({ url: '/package-settings/pages/store-settings-financial/store-settings-financial' })
  }
  http.request({
    url: '/shop/shopBankCard/' + (Data.isDefault ? 'setDefault' : 'setNotDefault?shopBankCardId=' + shopBankCardId),
    method: 'PUT',
    data: { shopBankCardId }
  }).then(() => {
    uni.redirectTo({
      url: '/package-settings/pages/store-settings-financial/store-settings-financial'
    })
  })
}
</script>

<style lang="scss" scoped>
@use "store-settings-account";
</style>
